import React ,{useEffect}from 'react'
import log from '../assets/css/login.module.css'
import { useNavigate } from 'react-router-dom';
import { DownOutlined } from '@ant-design/icons'
import { message ,Checkbox } from 'antd';
import { useState } from 'react';
import axios from '../axios/index'
// 忘记密码
export default function Password() {
    let [phone,setPhone] = useState('');
    let [password,setPassword] = useState('');
    let [rewrite,setRewrite] = useState('');
    let [code,setCode]=useState('');
    let nav = useNavigate();
    let [num,setNum] =useState(60);
    let [bool,setBool] = useState(false)
    useEffect(()=>{
        if(bool){
            setTimeout(() => {
                setNum(num-1);
                if(num==0){
                    setNum(60);
                    setBool(false)
                    setCode('')
                    return;
                }
            }, 1000);
        }  
   
})
    // 获取图片
    function getImg(url) {
        return new URL(url, import.meta.url).href;
    } 
    function getImg(url) {
        return new URL(url, import.meta.url).href;
    }
    // 正则判断手机号
    function isValidPhoneNumber(phoneNumber) {
        const regex = /^(13[0-9]|14[57]|15[012356789]|16[256]|17[0-9]|18[0-9]|19[0-9])\d{8}$/;
        return regex.test(phoneNumber);
      }

    // 验证手机号
    function verPhone(){
        if(!isValidPhoneNumber(phone)){
            console.log(phone);    
            message.info('请输入正确的手机号')
          }
    }
// 点击验证码，判断手机号是否为空，请求数据获得验证码
    function verCode(){
        if(phone==''){
            message.info('请输入手机号')
            return;
        }
        axios.post('/api/code').then(res=>{
            console.log(res);
            setCode(res.code)
            
        })
    }
// 判断密码
    function isValidPassword(password) {
        const regex = /^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{8,20}$/;
        return regex.test(password);
      }
    // 输入密码，判断密码是否符合规定
    function verPass(){
        if(phone==''){
            message.info('请输入手机号')
            return;
        }
        if(code==''){
            message.info('请先获取验证码')
            return;
        }
        if(!isValidPassword(password)){
            message.info('请输入包含字母和数字在内的8-20位密码');
          }
    }
// 验证两次输入密码是否正确
function verWore(){
    if(phone==''){
        message.info('请输入手机号')
        return;
    }
    if(code==''){
        message.info('请先获取验证码')
        return;
    }
    if(password == ''){
        message.info('请先输入密码')
    }
    if(password != rewrite){
        message.info('两次密码不一致')
      }
}
    // 点击注册
    function edit(){
          if(phone == ''||password == ''||rewrite==''||code==''){
            message.info('请输入完整字段')
            return;
          }
          axios.put('/api/password',{
            phone:phone,
            password:password
          }).then(res=>{
            console.log(res);
            nav('/login')
            message.info('修改成功')
          })
                 

    }
    return (
        <div className={log.wrap}>
            <div className={log.img}>
                <img src={getImg('../assets/images/logo.png')} alt="" />
            </div>
            <div className={log.login}>
                <div className={log.left}>
                    <p>忘记密码</p>
                    <div className={log.input}>
                        <div className={log.addr}>
                            <span>中国+86</span>
                            <DownOutlined />
                        </div>
                        <input type="text" placeholder='请输入手机号' className={log.leftInput} value={phone} onChange={(e)=>{   
                            setPhone(e.target.value)

                        }} onBlur={(e)=>{
                            console.log(e.target.value);
                            verPhone()
                        }}/>
                    </div>
                    <div className={log.input}>
                        <input type="text" className={log.code} placeholder='请输入验证码' value={code} onChange={()=>{}}/>
                        <div className={log.getCode} onClick={()=>{
                            verCode()
                        }} style={{
                            cursor:'pointer'
                        }}>{bool?`${num}s`:'获取验证码'}</div>
                    </div>
                    <div className={log.input}>
                        <input type="password" placeholder='请输入密码，包含数字和字母的8-20位密码' value={password} onChange={(e)=>{
                            setPassword(e.target.value)
                        }} onBlur={(e)=>{
                            verPass()
                        }}/>
                    </div>
                    <div className={log.input}>
                        <input type="password" placeholder='确认密码' value={rewrite} onChange={(e)=>{
                            setRewrite(e.target.value)
                        }} onBlur={()=>{
                            verWore()
                        }}/>
                    </div>

                    <button className={log.btn} style={{
                        marginTop:20
                    }}
                    onClick={()=>{
                        edit()
                    }}
                    >确认修改</button>
                    <div className={log.fo} style={{
                        justifyContent:'center',
                        fontSize:14,
                       
                        marginTop:30
                    }}>
                        <p style={{ color: '#C8C8C8'}}>已有账号，立即 <span style={{
                            color:'#8479E3'
                        }} 
                        onClick={()=>{
                            nav('/login')
                        }}
                        >登录</span></p>
                    </div>
                </div>
                <img src={getImg('../assets/images/weit.png')} alt="" />
            </div>
            <div className={log.btm}>
            2018-2019 北京乐闻诺科技有限公司 京ICP备19041303号
            </div>
        </div>
    )
}
